{extend name='public/alert' /}

{block name="content"}
<style >
    .img-box {
        position: relative;
        overflow: hidden;
        width: 230px;
        height: 150px;
        vertical-align: middle;
        text-align: center;
        cursor: pointer;
        border: 1px #efefed solid;
        color: #76838f;
    }

    .img-box img {
        max-width: 100%;
    }

    .layui-col-md3 {
        padding: 0 10px;
        text-align: center
    }

    .media-body {
        padding: 10px 5px;
        border: 1px solid rgb(231, 231, 235);
    }

    .media-btn {
        margin-top: 10px;
        text-align: center
    }

    .media-desc img {
        width: 100%;
        height: 180px;
    }

    .mdedia-lists-box {
        border-bottom: 1px solid rgb(231, 231, 235);
        display: inline-block;
        padding: 5px 0 5px 0px;
        height: 48px;
        width: 100%;
    }

    .media-img-box img {
        width: 100%;
        height: 48px;
    }

    .media-content {
        position: relative;
        height: 180px;
    }

    .media-content img {
        width: 100%;
        height: 180px;
    }

    .media-desc {

        position: absolute;
        background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
        color: #ffffff;
        width: 100%;
        bottom: 0;
        height: 45px;
        text-align: left;
    }
</style >
<div class="layui-fluid" >
    <div class="layui-card" >

        <div class="layui-card-body" style="padding: 15px;" >
            <form class="layui-form " lay-filter="form" >


                <div class="layui-form-item" >
                    <label class="layui-form-label" >关键词：</label >
                    <div class="layui-input-inline" >
                        <input type="text" name="keyword" lay-verify="required" placeholder="" class="layui-input" >
                    </div >

                </div >
                <input type="hidden" name="msg_type" value="" >
                <input type="hidden" name="type" value="" >
                <input type="hidden" name="id" value="" >
                <input type="hidden" name="material_id" value="" >
                <div class="layui-form-item" >
                    <label class="layui-form-label" >状态：</label >
                    <div class="layui-input-block" >
                        <input type="radio" name="status" lay-filter="required" checked value="1" title="启用" >
                        <input type="radio" name="status" lay-filter="required" value="0" title="禁用" >
                    </div >
                </div >


                <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" >
                    <ul class="layui-tab-title" >
                        <li class="layui-this" >内容</li >
                        <li >图片</li >
                        <li >图文</li >
                        <li >视频</li >
                        <li >音频</li >
                    </ul >

                    <div class="layui-tab-content" style="padding: 15px;" >
                        <div class="layui-tab-item layui-show text" >
                            <div class="layui-form-item layui-form-text" >
                                <div class="layui-input-block" >
                                    <textarea placeholder="请输入回复内容" class="layui-textarea" name="data" ></textarea >
                                </div >
                            </div >
                        </div >
                        <div class="layui-tab-item image" >
                            <div class="img-box" id="image" >
                                <img src="__WECHAT__/images/add-img.png" alt="" style="height:auto;padding-top:40px" >
                                <div class="bottomBar" >点击选择</div >
                            </div >
                            <div class="layui-row"  style="display: none">
                                {volist name="materialGroup['image']" id="vo"}
                                <div class="layui-col-md3" >
                                    <div class="media-body" >
                                        <div class="media-time" >
                                            发布时间：2019-08-12 : 10:38
                                        </div >
                                        <span style="display: block;" >
                                  <div class="media-content" >
                                        <div class="media-desc" ><p class="media-desc-sp" ></p ></div >
                                        <img class="media-img" width="100%" height="180" src="{$vo.media_url}" >
                                  </div >
                                 </span >
                                        <div >
                                            <ul >
                                            </ul >
                                        </div >
                                        <div class="media-item-type2" >
                                            <div class="layui-btn-group media-btn" >
                                                <a href="javascript:;" onclick="materialSelect(this,'{$vo.id}','image')"
                                                   class="layui-btn layui-btn-primary layui-btn-sm" >
                                                    <i class="layui-icon" ></i >选择
                                                </a >
                                            </div >
                                        </div >
                                    </div >

                                </div >
                                {/volist}
                            </div >
                        </div >
                        <div class="layui-tab-item news" >
                            <div class="img-box" id="news" >
                                <img src="__WECHAT__/images/add-img.png" alt="" style="height:auto;padding-top:40px" >
                                <div class="bottomBar" >点击选择</div >
                            </div >
                            <div class="layui-row"  style="display: none">
                                {volist name="materialGroup['news']" id="vo"}

                                <div class="layui-col-md3" >
                                    <div class="media-body" >
                                        <div class="media-time" >
                                            发布时间 {$vo.create_time|date="Y-m-d H:i:s"}
                                        </div >
                                        <span style="display: block;" >
                                         <div class="media-content" >
                                             <div class="media-desc" >
                                                 <p class="media-desc-sp" >{if isset($vo['item_info'][0]['title'])}{$vo['item_info'][0]['title']}{/if}</p >
                                             </div >
                                                <img class="media-img"  src="{if isset($vo['item_info'][0]['cover'])}{$vo['item_info'][0]['cover']}{/if}" >
                                          </div >
                                       </span >
                                        <!--                                //多图文&ndash;&gt;-->
                                        {if count($vo['item_info'])>1}
                                        <div >
                                            <ul >
                                                {volist name="vo.item_info" id="v" offset='1' }
                                                <li >
                                                    <div class="mdedia-lists-box" >
                                                        <div class="media-title-box layui-col-md9 fl" >
                                                            {$v.title}
                                                        </div >
                                                        <div class="media-img-box layui-col-md3 fr" >
                                                            <img class="media-lists-img" src="{$v.cover}" >
                                                        </div >
                                                    </div >
                                                </li >
                                                {/volist}
                                            </ul >
                                        </div >
                                        {/if}
                                        <div class="media-item-type2" >
                                            <div class="layui-btn-group media-btn" >
                                                <a href="javascript:;" onclick="materialSelect(this,'{$vo.id}','news')"
                                                   class="layui-btn layui-btn-primary layui-btn-sm" >
                                                    <i class="layui-icon" ></i >选择
                                                </a >
                                            </div >
                                        </div >
                                    </div >

                                </div >

                                {/volist}
                            </div >
                        </div >
                        <div class="layui-tab-item video" >
                            <div class="img-box" id="video" >
                                <img src="__WECHAT__/images/add-img.png" alt="" style="height:auto;padding-top:40px" >
                                <div class="bottomBar" >点击选择</div >
                            </div >
                            <div class="layui-row" style="display: none" >
                                {volist name="materialGroup['video']" id="vo"}
                                <div class="layui-col-md3" >
                                    <div class="media-body" >
                                        <div class="media-time" >
                                            发布时间 {$vo.create_time|date="Y-m-d H:i:s"}
                                        </div >
                                        <span style="display: block;" >
                                     <div class="media-content" >
                                         <div class="media-desc" >
                                             <p class="media-desc-sp" ></p >
                                         </div >
                                         <div style="font-size: 50px;height: 180px;line-height:180px;text-align: center" >
                                             <i class="fa fa-play-circle-o" ></i >
                                         </div >
                                      </div >
                                </span >
                                        <!--                                //多图文&ndash;&gt;-->

                                        <div class="media-item-type2" >
                                            <div class="layui-btn-group media-btn" >
                                                <a href="javascript:;" onclick="materialSelect(this,'{$vo.id}','video')"
                                                   class="layui-btn layui-btn-primary layui-btn-sm" >
                                                    <i class="layui-icon" ></i >选择
                                                </a >
                                            </div >
                                        </div >
                                    </div >

                                </div >
                                {/volist}
                            </div >
                        </div >
                        <div class="layui-tab-item voice" >
                            <div class="img-box" id="voice" >
                                <img src="__WECHAT__/images/add-img.png" alt="" style="height:auto;padding-top:40px" >
                                <div class="bottomBar" >点击选择</div >
                            </div >
                            <div class="layui-row" style="display: none" >
                                {volist name="materialGroup['voice']" id="vo"}
                                <div class="layui-col-md3" >
                                    <div class="media-body" >
                                        <div class="media-time" >
                                            发布时间 {$vo.create_time|date="Y-m-d H:i:s"}
                                        </div >
                                        <span style="display: block;" >
                                     <div class="media-content" >
                                         <div class="media-desc" >
                                             <p class="media-desc-sp" ></p >
                                         </div >
                                         <audio class="media-img" src="{$vo.media_url}" ></audio >
                                      </div >
                                </span >
                                        <div class="media-item-type2" >
                                            <div class="layui-btn-group media-btn" >
                                                <a href="javascript:;" onclick="materialSelect(this,'{$vo.id}','video')"
                                                   class="layui-btn layui-btn-primary layui-btn-sm" >
                                                    <i class="layui-icon" ></i >选择
                                                </a >
                                            </div >
                                        </div >
                                    </div >

                                </div >
                                {/volist}
                            </div >
                        </div >
                    </div >
                    <input type="hidden" name="id" >
                </div >

                <div class="layui-form-item" >
                    <div class="layui-input-inline" >

                        <button type="button" class="layui-btn" lay-submit="" lay-filter="submit" >立即提交</button >
                    </div >
                </div >
            </form >

        </div >
    </div >
</div >


<script >

    layui.use(['form', 'table', 'element', 'layer'], function () {
        var form = layui.form,
            layer = layui.layer,
            table = layui.table,
            element = layui.element;
        $ = layui.jquery;
        var info = {:json_encode($info)};
        form.val('form', info)
        form.on('submit(submit)', function (data) {
            loading = layer.load(1, {shade: [0.1, '#fff']});
            $.post('{:url("")}', data.field, function (res) {
                layer.close(loading);
                if (res.code > 0) {
                    layer.msg(res.msg, {time: 1000, icon: 1});
                } else {
                    layer.msg(res.msg, {time: 1000, icon: 2});
                }
            });
        });


        $('.img-box').click(function (e) {
            index = layer.open({
                type: 1,
                content: $(this).next('.layui-row'),
                area: ['800px', '600px'],
                anim: 2,
                maxmin: true,
            });
        })


    });

    function materialSelect(obj, id, type) {
        var src = $(obj).parents('.layui-tab-item').find('.media-img').attr('src');
        $("input[name='material_id']").val(id)
        $("input[name='msg_type']").val(type)
        $(obj).parents('.layui-tab-item').find('.img-box').find('img').attr('src', src);
        layer.close(index);
    }
</script >


{/block}